<template>
  <div class="news section-bg">
    <div class="news-btn-group d-flex align-items-center justify-content-between">
      <div class="d-flex">
        <div class="news-btn active">NEWS</div>
        <!-- <div class="roadmap-btn">ROADMAP</div> -->
      </div>
      <a href="https://t.me/DMDcoinEnglish" rel="noopener noreferrer" target="_blank">
        <div class="default-btn square" style="margin: 0; border-radius: 0; padding: 15px 25px">
          Join In TG →
        </div>
      </a>
    </div>
    <div class="carousel slide" data-bs-touch="false" id="roadMapCarouselLarge">
      <div class="news__carousel-inner carousel-inner">
        <div class="carousel-item active">
          <div class="news__card-container">
            <Card
              class="grow"
              :key="index"
              v-for="(item, index) in cardList"
              v-bind="item"
              @share="handleShare"
            ></Card>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Card from './components/Card.vue'

function handleShare() {
  console.log('share')
}

const cardList = [
  {
    imgSrc: '/img/about-2.jpg',
    date: '02/05/2024',
    title: 'I AM TITLE1I AM TITLE1I AM TITLE1I AM TITLE1I AM TITLE1I AM TITLE1',
    desc: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit pariatur voluptas sit quis cupiditate odio cum accusantium consequuntur. Facere, voluptate maiores quae eum necessitatibus sint obcaecati nam quidem fugit cum modi eaque perspiciatis nisi eligendi quisquam libero, qui vel. Saepe nostrum quidem similique magni, maiores eius omnis ducimus natus eveniet.'
  },
  {
    imgSrc: '/img/about-2.jpg',
    date: '02/06/2024',
    title: 'I AM TITLE2',
    desc: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit pariatur voluptas sit quis cupiditate odio cum accusantium consequuntur. Facere, voluptate maiores quae eum necessitatibus sint obcaecati nam quidem fugit cum modi eaque perspiciatis nisi eligendi quisquam libero, qui vel. Saepe nostrum quidem similique magni, maiores eius omnis ducimus natus eveniet.'
  },
  {
    imgSrc: '/img/about-2.jpg',
    date: '02/06/2024',
    title: 'I AM TITL3',
    desc: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit pariatur voluptas sit quis cupiditate odio cum accusantium consequuntur. Facere, voluptate maiores quae eum necessitatibus sint obcaecati nam quidem fugit cum modi eaque perspiciatis nisi eligendi quisquam libero, qui vel. Saepe nostrum quidem similique magni, maiores eius omnis ducimus natus eveniet.'
  },
  {
    imgSrc: '/img/about-2.jpg',
    date: '02/06/2024',
    title: 'I AM TITLE4',
    desc: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit pariatur voluptas sit quis cupiditate odio cum accusantium consequuntur. Facere, voluptate maiores quae eum necessitatibus sint obcaecati nam quidem fugit cum modi eaque perspiciatis nisi eligendi quisquam libero, qui vel. Saepe nostrum quidem similique magni, maiores eius omnis ducimus natus eveniet.'
  },
  {
    imgSrc: '/img/about-2.jpg',
    date: '02/06/2024',
    title: 'I AM TITLE5',
    desc: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit pariatur voluptas sit quis cupiditate odio cum accusantium consequuntur. Facere, voluptate maiores quae eum necessitatibus sint obcaecati nam quidem fugit cum modi eaque perspiciatis nisi eligendi quisquam libero, qui vel. Saepe nostrum quidem similique magni, maiores eius omnis ducimus natus eveniet.'
  }
]
</script>

<style scoped>
.news {
  padding: 290px 100px 190px;
}
.news-btn-group {
  margin-bottom: 40px;
}
.news-btn {
  position: relative;
  font-family: 'Raleway', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}
.news-btn.active::after {
  position: absolute;
  content: '';
  width: 100%;
  bottom: -0.5rem;
  left: 0;
  border-bottom: 4px solid red;
}
.news__card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 35px;
}
.news__carousel-inner {
  overflow: visible;
}
.grow {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  transition-duration: 0.3s;
  transition-property: transform;
  &:hover {
    transform: scale(1.1);
  }
}
</style>
